import styled from 'styled-components'
import Icon from '@/components/Icon'
export const StyledMccMtInfo = styled.div`
	height: 100%;
	.body {
		overflow-y: auto;
		/* width: 298px; */
		.title-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 35px;
			width: 100%;
			margin-top: 5px;
			.title {
				color: #666;
				width: 95px;
				white-space: nowrap;
			}
			.checking-result {
				width: calc(100% - 95px);
				&.abnormal {
					color: red;
				}
			}
		}
	}
	.info-item {
		display: flex;
		height: 36px;
		justify-content: flex-start;
		align-items: center;
		.label {
			width: 95px;
			line-height: 20px;
		}
		.slider {
			margin-left: 14px;
			margin-right: 8px;
		}
		.value-wrap {
			color: #666;
			width: calc(100% - 95px);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			.label {
				width: 60px;
				margin-right: 20px;
			}
		}
		.value-icon {
			display: flex;
			align-items: center;
			.value {
				width: calc(100% - 41px);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		&.mt-ip-info {
			.value-wrap {
				.value.normal {
					text-decoration: none;
					color: #666;
					cursor: default;
				}
				.value.link {
					text-decoration: underline;
					color: #3e9bd0;
					cursor: pointer;
				}
			}
		}
		.slider {
			.kd-progress-line-bar {
				height: 2px !important;
			}
		}
	}
`
export const ProgressBtnIcon = styled(Icon)`
	width: 16px;
	height: 16px;
	background-position: 0 -542px;
	cursor: default;
	&:active {
		cursor: pointer;
	}
`
/**麦克风按钮图标 */
export const MicIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -600px -305px;
	&:hover {
		background-position: -630px -305px;
	}
	&.offline-disabled {
		cursor: not-allowed;
	}
`
export const MicNoIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -480px -305px;
	&:hover {
		background-position: -510px -305px;
	}
	&.offline-disabled {
		cursor: not-allowed;
	}
`
/**扬声器按钮图标 */
export const SpeakerIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -360px -335px;
	&:hover {
		background-position: -390px -335px;
	}
	&.offline-disabled {
		cursor: not-allowed;
	}
`
export const SpeakerNoIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -360px -305px;
	&:hover {
		background-position: -390px -305px;
	}
	&.offline-disabled {
		cursor: not-allowed;
	}
`
